<template>
<el-dialog
    :title="!dataForm.activityId ? '新增' : '修改'"
    :close-on-click-modal="false"
    center
    width= 40%
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="170px">
        <el-form-item label="选择商品">
            <div v-if="dataForm.activityId" class="prodBox">
                <span style="width:200px;margin:10px 0 0 10px">{{dataForm.prodName}}</span>
                <img :src="dataForm.pic" alt="" style="width:140px;border-radius:5px">
            </div>
            <div v-if="!dataForm.activityId">
                <div v-if = '!prod' class="chosenBox" @click="enterChoseProd">
                    <div class="center">
                        <div class="border b1"></div>
                        <div class="border b2"></div>
                        <div class="border b3"></div>
                        <div class="border b4"></div>
                    </div>
                </div>
                <div v-if="prod" class="prodBox" @click="enterChoseProd">
                    <span style="width:200px;margin:10px 0 0 10px">{{prod.prodName}}</span>
                    <img :src="prod.pic" alt="" style="width:140px;border-radius:5px">
                </div>
            </div>
        </el-form-item>
        <el-form-item label="活动价格" prop="activityPrice">
            <el-input v-model="dataForm.activityPrice"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
            v-model="dataForm.startTime"
            type="datetime"
            placeholder="选择开始日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="small">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
            v-model="dataForm.endTime"
            type="datetime"
            placeholder="选择结束日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="small">
            </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="是否限制下单产品总数">
            <el-radio v-model="dataForm.activityTimesFlag" label=1>是</el-radio>
            <el-radio v-model="dataForm.activityTimesFlag" label=0>否</el-radio>
        </el-form-item> -->
        <!-- <el-form-item v-if="dataForm.activityTimesFlag == 1" label="限购数量">                 -->
        <el-form-item label="限购数量" prop="activityTimes">
            <el-input v-model="dataForm.activityTimes" placeholder="请输入限购数量"></el-input>
            <span>输入0表示不限制购买数量</span>
        </el-form-item>
        <!-- <el-form-item label='是否限制下单次数'>
            <el-radio v-model="dataForm.activityOrderFlag" label="1">是</el-radio>
            <el-radio v-model="dataForm.activityOrderFlag" label="0">否</el-radio>
        </el-form-item> -->
        <!-- <el-form-item label="限购次数" v-if="dataForm.activityOrderFlag == 1">                 -->
        <el-form-item label="限购次数" prop="activityOrderTimes">
            <el-input v-model="dataForm.activityOrderTimes" placeholder="请输入限购次数"></el-input>
            <span>输入0表示不限制购买次数</span>
        </el-form-item>
        <el-form-item label="起购数量" prop="activityInitialQuantity">
            <el-input v-model="dataForm.activityInitialQuantity" placeholder="请输入起购数量"></el-input>
            <span>输入0表示不限制购买数量</span>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取消</el-button>
    <!-- <el-button @click="testFun">获取dataform</el-button> -->
    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

    <!-- 选择商品 -->
    <el-dialog
        title=""
        :visible.sync="choseProdVisible"
        :close-on-click-modal="false"
        top="8vh"
        center
        width="70%"
        append-to-body>
        <div style="height:70vh;overflow:auto">
        <avue-crud ref="crud"
                :data="prodList"
                :option="tableOption">
            <template slot-scope="scop" slot="menu">
                <el-button size="medium"   type="normal" @click.stop="choseProd(scop.row)">确定</el-button>
            </template>
        </avue-crud>
        </div>
        <div style="height:20px" slot="footer">
        </div>
    </el-dialog>



</el-dialog>
</template>

<script>
import { tableOption } from '@/crud/finance/prodList'
export default {
    data() {
        return {
            visible: false,
            choseProdVisible: false,
            tableOption: tableOption,
            dataForm:{
                prodId:null,
                activityPrice: 0,
                // activityTimesFlag: '1',
                activityTimes: 0,
                // activityOrderFlag: '1',
                activityOrderTimes: 0,
                startTime: null,
                endTime: null,
                activityInitialQuantity: 0,
            },
            prod:null,
            prodList: [],
            dataRule:{
                activityPrice:[
                    { required: true, message: '请填写活动价格', trigger: 'blur'}
                ],
                startTime:[
                    { required: true, message: '请填写活动开始时间', trigger: 'blur'}
                ],
                endTime:[
                    { required: true, message: '请填写活动结束时间', trigger: 'blur'}
                ],
                activityTimes:[
                    { required: true, message: '请填写商品限购数量，填0则不限制购买数量', trigger: 'blur'}
                ],
                activityOrderTimes:[
                    { required: true, message: '请填写限购次数，填0则为不限制下单次数', trigger: 'blur'}
                ],
                activityInitialQuantity: [
                   { required: true, message: '请填写起购数量，填0则不限制起购数量', trigger: 'blur' }
                ],
            }
        }

    },

    computed: {
        activityTimesFlag(){
            if (this.dataForm.activityTimes == 0) {
                return 0
            }else if (this.dataForm.activityTimes>0) {
                return 1
            }
        },
        activityOrderFlag(){
            if (this.dataForm.activityOrderTimes == 0) {
                return 0
            }else if (this.dataForm.activityOrderTimes>0) {
                return 1
            }
        }
    },

    props:{
    },

    methods: {
        init (row) {
            console.log(row);
            // 重置表格
            this.visible = true
            this.dataForm = {
                prodId:null,
                activityPrice: 0,
                // activityTimesFlag: '1',
                activityTimes: '',
                activityOrderFlag: '1',
                activityOrderTimes: '',
                activityInitialQuantity: 0,
                startTime: null,
                endTime:null,
            },
            this.prod = null
            if (row.activityId) {
                this.dataForm.prodId = row.prodId
                this.dataForm.pic = row.pic
                this.dataForm.prodName = row.prodName
                // this.dataForm.type = String(row.type)
                this.dataForm.activityPrice = row.activityPrice
                // this.dataForm.activityTimesFlag = String(row.activityTimesFlag)
                this.dataForm.activityTimes = row.activityTimes
                // this.dataForm.activityOrderFlag = String(row.activityOrderFlag)
                this.dataForm.activityOrderTimes = row.activityOrderTimes
                this.dataForm.activityId = row.activityId
                this.dataForm.startTime = row.startTime
                this.dataForm.endTime = row.endTime
                this.dataForm.activityInitialQuantity = row.activityInitialQuantity
            }
            this.$http({
                url: this.$http.adornUrl("/activity/getActivityPro"),
                method:'get'
            }).then(({data}) =>{
                this.prodList = data
            })
        },

        // 表单提交
        dataFormSubmit () {
            this.$refs['dataForm'].validate((valid) => {
            if (valid) {
                // console.log(this.amount,this.percent);
                console.log(this.dataForm.prodId);
                if (!this.dataForm.prodId) {
                    this.$message.error('请选择商品')
                    return
                }
                let url = this.dataForm.activityId?'/activity/updateActivityPro':'/activity/saveActivityPro'
                this.$http({
                    url: this.$http.adornUrl(url),
                    method: 'post',
                    data: this.$http.adornParams(
                        Object.assign({
                            prodId: this.dataForm.prodId,
                            pic: this.dataForm.pic,
                            prodName:this.dataForm.prodName,
                            activityPrice: this.dataForm.activityPrice,
                            activityTimesFlag: this.activityTimesFlag,
                            activityTimes: this.dataForm.activityTimes,
                            activityOrderFlag: this.activityOrderFlag,
                            activityOrderTimes: this.dataForm.activityOrderTimes,
                            // activityTimes: 1,
                            startTime: this.dataForm.startTime,
                            activityInitialQuantity: this.dataForm.activityInitialQuantity,
                            endTime: this.dataForm.endTime,
                            activityId: this.dataForm.activityId ,
                            status: 0
                        },)
                    )
                }).then(({data}) => {
                        this.$message({
                            message:'操作成功',
                            type:'success'
                    })
                    this.visible = false
                    this.$emit("refreshDataList")
                })
            }
            })
        },

        enterChoseProd(){
            this.choseProdVisible = true

        },

        choseProd(row){
            this.prod = row
            this.dataForm.prodId = row.prodId
            this.dataForm.pic = row.pic
            this.dataForm.prodName = row.prodName
            this.choseProdVisible = false
        }
    },
}
</script>
<style lang="scss" scoped>
    .chosenBox{
        height: 148px;
        width: 148px;
        border: 1px dashed #C0CCDA;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #8C939D;
        font-size: 48px;
        font-weight: 100;
        cursor: pointer;
    }
    .center{
        height: 26px;
        width: 26px;
        display: flex;
        flex-wrap: wrap;
    }
    .border{
        height: 13px;
        width: 13px;
        border: 1px solid white;
    }
    .b1,.b2{
        border-bottom: 1px solid #c0c0c0;
    }
    .b3,.b4{
        border-top: 1px solid #c0c0c0;
    }
    .b1,.b3{
        border-right: 1px solid #c0c0c0;
    }
    .b2,.b4{
        border-left: 1px solid #c0c0c0;
    }

    .prodBox{
        height: 140px;
        border: 1px solid #c0c0c0;
        width: 340px;
        border-radius: 5px;
        display: flex;
    }
    .el-input{
        width: 200px;
    }
</style>
